<template>
  <div id="seven-days-overdue" />
</template>
<script>
// import echarts from 'echarts'
export default {
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    // initChart() {
    //   this.chart = echarts.init(document.getElementById('seven-days-overdue'))
    //   const XName = []
    //   const data1 = []
    //   var img = [
    //     'image://',
    //     'image://',
    //     'image://',
    //     'image://'
    //   ]
    //   var data = [
    //     {
    //       coords: [
    //         ['2024/03/07', 10],
    //         ['2024/03/06', 20],
    //         ['2024/03/05', 30],
    //         ['2024/03/04', 40],
    //         ['2024/03/03', 30],
    //         ['2024/03/02', 20],
    //         ['2024/03/01', 10]
    //       ]
    //     }
    //   ]
    //   const dischargeTrend = [
    //     {
    //       time: '2024/03/07',
    //       number: 10
    //     },
    //     {
    //       time: '2024/03/06',
    //       number: 20
    //     },
    //     {
    //       time: '2024/03/05',
    //       number: 30
    //     },
    //     {
    //       time: '2024/03/04',
    //       number: 40
    //     },
    //     {
    //       time: '2024/03/03',
    //       number: 30
    //     },
    //     {
    //       time: '2024/03/02',
    //       number: 20
    //     },
    //     {
    //       time: '2024/03/01',
    //       number: 10
    //     }
    //   ]
    //   dischargeTrend.forEach((item) => {
    //     XName.push(item.time)
    //     data1.push(item.number)
    //   })
    //   const option = {
    //     // backgroundColor: "#0e2147",
    //     grid: {
    //       left: '30',
    //       top: '30',
    //       bottom: '100',
    //       right: '30'
    //     },
    //     legend: {
    //       type: 'scroll',
    //       data: '来电量',
    //       itemWidth: 18,
    //       itemHeight: 12,
    //       textStyle: {
    //         color: '#00ffff',
    //         fontSize: 14
    //       }
    //     },
    //     yAxis: [
    //       {
    //         type: 'value',
    //         position: 'left',
    //         nameTextStyle: {
    //           color: '#00FFFF'
    //         },
    //         splitLine: {
    //           lineStyle: {
    //             type: 'dashed',
    //             color: 'rgba(135,140,147,0.8)'
    //           }
    //         },
    //         axisLine: {
    //           show: false
    //         },
    //         axisTick: {
    //           show: false
    //         },
    //         axisLabel: {
    //           formatter: '{value}',
    //           color: '#fff',
    //           fontSize: 14
    //         }
    //       }
    //     ],
    //     xAxis: [
    //       {
    //         type: 'category',
    //         axisTick: {
    //           show: false
    //         },
    //         axisLine: {
    //           show: false,
    //           lineStyle: {
    //             color: '#0696f9'
    //           }
    //         },
    //         axisLabel: {
    //           inside: false,
    //           textStyle: {
    //             color: '#fff', // x轴颜色
    //             fontWeight: 'normal',
    //             fontSize: '14',
    //             lineHeight: 22
    //           }
    //         },
    //         data: XName
    //       }
    //     ],
    //     series: [
    //       {
    //         symbolSize: 150,
    //         symbol: img[2],
    //         name: '小灯光',
    //         type: 'line',
    //         data: data1,
    //         itemStyle: {
    //           normal: {
    //             borderWidth: 5,
    //             color: '#0696f9'
    //           }
    //         }
    //       },
    //       {
    //         name: '滑行的光点',
    //         type: 'lines',
    //         coordinateSystem: 'cartesian2d',
    //         symbolSize: 30,
    //         polyline: true,
    //         effect: {
    //           show: true,
    //           trailLength: 0,
    //           symbol: 'arrow',
    //           period: 10, // 光点滑动速度
    //           symbolSize: 150,
    //           symbol: img[0]
    //         },
    //         lineStyle: {
    //           normal: {
    //             width: 1,
    //             opacity: 0.6,
    //             curveness: 0.2
    //           }
    //         },
    //         data: data
    //       }
    //     ]
    //   }
    //   this.chart.clear() // 清除画布，重新绘制的时候就不会遗留之前的数据，解决高度数据变化echarts高度不变问题
    //   this.chart.setOption(option) // 重新绘制图标
    // }
  }
}
</script>
<style>
#seven-days-overdue {
  width: 100%;
  height: 280px;
}
</style>
